<!doctype html>
<html>
<head>
 <title>IE7 {CSS2: auto}</title>

 <!-- This one's for you Bill. Better late than never! ;-) -->

 <!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]>
  <script src="../trunk/lib/IE9.js"></script>
  <script src="../ie7-dynamic-attributes.js"></script>
 <![endif]-->

 <style>

 	/* this is the dynamic rule. It matches the "required" flag
 	   of empty input elements */

	fieldset p.required > input[value=""] + sup {
		color: red;
	}

	/* the remaining rules make the form look nice :-) */

	form {
		margin: 20px;
		padding: 20px;
		border: 1px dashed #ddd;
	}

	fieldset {
		border: none;
		font: 12px/14px Verdana,Arial,sans-serif;
		border-left: 40px solid #efe;
	}

	fieldset p {
		margin-left: 10px;
	}

	fieldset p * {
		margin-right: 4px;
	}

	fieldset p > label {
		display: block;
		font-weight: bold;
		min-width: 80px;
	}

	fieldset p > input {
		border: 1px solid black;
		margin: 1px 4px 4px 1px;
		padding-left: 2px;
	}

	fieldset p > input:focus {
		background-color: #efe;
	}

	fieldset p > input + sup {
		vertical-align: top;
		color: #ddd;
	}

 </style>
</head>

<body>
 <script src="ie7-demo.js"></script>
 <h2>Dynamic Attribute Selectors</h2>

 <form>
  <fieldset>
   <p class="required"><label>Name:</label><input type="text" value=""><sup>required</sup></p>
   <p><label>Address:</label><input type="text" value="">
    <br><input type="text" value=""></p>
   <p><label>Phone:</label><input type="text" value=""></p>
   <p><label>Fax:</label><input type="text" value=""></p>
   <p class="required"><label>Email:</label><input type="text" value=""><sup>required</sup></p>
  </fieldset>
 </form>
 <p>To see the dynamic effect, enter text in the <em>required</em> fields.</p>

 <p>&lt;&nbsp;<a href="index.html">back</a></p>
</body>
</html>
